Frontend-Monorepo: Lerna und Nx Workspace-Verwaltung

In der sich ständig weiterentwickelnden Landschaft der Frontend-Entwicklung kann die Verwaltung großer und komplexer Projekte eine erhebliche Herausforderung darstellen. Traditionelle Multi-Repo-Setups, die zwar Isolation bieten, können zu Code-Duplizierung, Problemen bei der Abhängigkeitsverwaltung und inkonsistenten Tools führen. Hier glänzt die Monorepo-Architektur. Ein Monorepo ist ein einziges Repository, das mehrere Projekte enthält, die oft miteinander in Beziehung stehen und gemeinsam erstellt und versioniert werden. Dieser Ansatz bietet zahlreiche Vorteile, erfordert jedoch für eine effektive Verwaltung eines Monorepos spezielle Tools. Dieser Artikel untersucht zwei beliebte Lösungen: Lerna und Nx.

Was ist ein Monorepo?

Ein Monorepo ist ein Versionskontrollsystem-Repository, das Code für viele Projekte enthält. Diese Projekte können miteinander in Beziehung stehen oder völlig unabhängig sein. Der Schlüssel ist, dass sie dasselbe Repository teilen. Unternehmen wie Google, Facebook, Microsoft und Uber haben Monorepos erfolgreich eingesetzt, um ihre riesigen Codebasen zu verwalten. Stellen Sie sich vor, Google speichert fast den gesamten Code, einschließlich Android, Chrome und Gmail, in einem einzigen Repository.

Vorteile eines Monorepos

• Code-Sharing und Wiederverwendung: Teilen Sie Code einfach zwischen Projekten, ohne komplexe Paketierungs- und Veröffentlichungsworkflows. Stellen Sie sich eine Designsystem-Bibliothek vor, die nahtlos in mehrere Anwendungen innerhalb desselben Repositorys integriert werden kann.
• Vereinfachte Abhängigkeitsverwaltung: Verwalten Sie Abhängigkeiten an einem einzigen Ort und stellen Sie die Konsistenz über alle Projekte hinweg sicher. Die Aktualisierung einer Abhängigkeit einer freigegebenen Bibliothek aktualisiert automatisch alle Projekte, die davon abhängen.
• Atomare Änderungen: Nehmen Sie Änderungen vor, die mehrere Projekte in einem einzigen Commit umfassen, um Konsistenz zu gewährleisten und das Testen zu vereinfachen. Zum Beispiel kann ein Refactoring, das sowohl das Frontend als auch das Backend betrifft, atomar durchgeführt werden.
• Verbesserte Zusammenarbeit: Teams können problemlos an verschiedenen Projekten innerhalb desselben Repositorys zusammenarbeiten, was den Wissensaustausch und die funktionsübergreifende Entwicklung fördert. Entwickler können Code aus verschiedenen Teams leicht durchsuchen und verstehen.
• Konsistente Tools und Praktiken: Erzwingen Sie konsistente Kodierungsstandards, Linting-Regeln und Build-Prozesse über alle Projekte hinweg. Dies verbessert die Codequalität und Wartbarkeit.
• Vereinfachtes Refactoring: Groß angelegte Refactoring-Projekte werden vereinfacht, da der gesamte zugehörige Code im selben Repository liegt. Automatisierte Refactoring-Tools können über die gesamte Codebasis hinweg verwendet werden.

Herausforderungen eines Monorepos

• Repository-Größe: Monorepos können sehr groß werden, was potenziell Klon- und Indexierungsvorgänge verlangsamt. Tools wie `git sparse-checkout` und `partial clone` können helfen, dieses Problem zu mindern.
• Build-Zeiten: Das Erstellen des gesamten Monorepos kann zeitaufwändig sein, insbesondere bei großen Projekten. Tools wie Lerna und Nx bieten optimierte Build-Prozesse, um dies zu beheben.
• Zugriffskontrolle: Das Einschränken des Zugriffs auf bestimmte Teile des Monorepos kann komplex sein. Eine sorgfältige Planung und Implementierung von Zugriffskontrollmechanismen ist erforderlich.
• Tooling-Komplexität: Das Einrichten und Verwalten eines Monorepos erfordert spezialisierte Tools und Wissen. Die Lernkurve kann anfänglich steil sein.

Lerna: Verwaltung von JavaScript-Projekten in einem Monorepo

Lerna ist ein beliebtes Tool zur Verwaltung von JavaScript-Projekten in einem Monorepo. Es optimiert den Workflow rund um die Verwaltung von Multi-Paket-Repositorys mit Git und npm. Es ist besonders gut geeignet für Projekte, die npm oder Yarn zur Abhängigkeitsverwaltung verwenden.

Hauptmerkmale von Lerna

• Versionsverwaltung: Lerna kann Pakete basierend auf Änderungen seit der letzten Veröffentlichung automatisch versionieren und veröffentlichen. Es verwendet konventionelle Commits, um die nächste Versionsnummer zu bestimmen.
• Abhängigkeitsverwaltung: Lerna verwaltet Inter-Paket-Abhängigkeiten und stellt sicher, dass Pakete innerhalb des Monorepos voneinander abhängen können. Es verwendet Symlinks, um lokale Abhängigkeiten zu erstellen.
• Aufgabenausführung: Lerna kann Befehle über mehrere Pakete hinweg parallel ausführen, was Build- und Testprozesse beschleunigt. Es unterstützt das Ausführen von Skripten, die in `package.json` definiert sind.
• Änderungserkennung: Lerna kann erkennen, welche Pakete seit der letzten Veröffentlichung geändert wurden, was gezielte Builds und Bereitstellungen ermöglicht.

Lerna Anwendungsbeispiel

Veranschaulichen wir die Verwendung von Lerna mit einem vereinfachten Beispiel. Angenommen, wir haben ein Monorepo mit zwei Paketen: `package-a` und `package-b`. `package-b` hängt von `package-a` ab.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Lerna initialisieren:

lerna init

Dies erstellt `lerna.json` und aktualisiert die Stamm-`package.json`. Die Datei `lerna.json` konfiguriert das Verhalten von Lerna.

2. Abhängigkeiten installieren:

npm install
# or
yarn install

Dadurch werden Abhängigkeiten für alle Pakete im Monorepo installiert, basierend auf den `package.json`-Dateien in jedem Paket.

3. Einen Befehl über Pakete hinweg ausführen:

lerna run test

Dies führt das `test`-Skript aus, das in den `package.json`-Dateien aller Pakete definiert ist, die es definiert haben.

4. Pakete veröffentlichen:

lerna publish

Dieser Befehl analysiert den Commit-Verlauf, bestimmt, welche Pakete sich geändert haben, erhöht deren Versionen basierend auf konventionellen Commits und veröffentlicht sie auf npm (oder Ihrem gewählten Register).

Lerna-Konfiguration

Die Datei `lerna.json` ist das Herzstück der Lerna-Konfiguration. Sie ermöglicht es Ihnen, das Verhalten von Lerna anzupassen, wie zum Beispiel:

• `packages`: Gibt den Speicherort der Pakete innerhalb des Monorepos an. Oft auf `["packages/*"]` gesetzt.
• `version`: Gibt die Versionierungsstrategie an. Kann `independent` (jedes Paket hat seine eigene Version) oder eine feste Version sein.
• `command`: Ermöglicht die Konfiguration von Optionen für spezifische Lerna-Befehle, wie `publish` und `run`.

Beispiel `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Intelligentes, schnelles und erweiterbares Build-System

Nx ist ein leistungsstarkes Build-System, das erweiterte Funktionen für das Monorepo-Management bietet. Es konzentriert sich auf inkrementelle Builds, Berechnungscaching und Aufgabenorchestrierung, um Build-Zeiten und die Produktivität von Entwicklern erheblich zu verbessern. Während Lerna sich hauptsächlich auf die Verwaltung von Paketen konzentriert, bietet Nx einen umfassenderen Ansatz zur Verwaltung des gesamten Monorepo-Workflows, einschließlich Codegenerierung, Linting, Testen und Bereitstellung.

Hauptmerkmale von Nx

• Inkrementelle Builds: Nx analysiert den Abhängigkeitsgraphen Ihrer Projekte und baut nur die Projekte neu, die sich seit dem letzten Build geändert haben. Dies reduziert die Build-Zeiten drastisch.
• Berechnungscaching: Nx speichert die Ergebnisse von Aufgaben wie Builds und Tests im Cache, sodass sie wiederverwendet werden können, wenn sich die Eingaben nicht geändert haben. Dies beschleunigt die Entwicklungszyklen zusätzlich.
• Aufgabenorchestrierung: Nx bietet ein leistungsstarkes Aufgabenorchestrierungssystem, mit dem Sie komplexe Build-Pipelines definieren und effizient ausführen können.
• Codegenerierung: Nx bietet Codegenerierungs-Tools, mit denen Sie schnell neue Projekte, Komponenten und Module erstellen können, die Best Practices und konsistenten Standards folgen.
• Plugin-Ökosystem: Nx verfügt über ein reichhaltiges Plugin-Ökosystem, das verschiedene Technologien und Frameworks wie React, Angular, Node.js, NestJS und weitere unterstützt.
• Abhängigkeitsgraphen-Visualisierung: Nx kann den Abhängigkeitsgraphen Ihres Monorepos visualisieren und Ihnen helfen, die Beziehungen zwischen Projekten zu verstehen und potenzielle Probleme zu identifizieren.
• Betroffene Befehle: Nx bietet Befehle, um Aufgaben nur auf den Projekten auszuführen, die von einer bestimmten Änderung betroffen sind. Dies ermöglicht es Ihnen, Ihre Anstrengungen auf die Bereiche zu konzentrieren, die Aufmerksamkeit erfordern.

Nx Anwendungsbeispiel

Veranschaulichen wir die Verwendung von Nx mit einem vereinfachten Beispiel. Wir erstellen ein Monorepo mit einer React-Anwendung und einer Node.js-Bibliothek.

1. Nx CLI global installieren:

npm install -g create-nx-workspace

2. Einen neuen Nx Workspace erstellen:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Dies erstellt einen neuen Nx Workspace mit einer React-Anwendung. Die Option `--preset=react` weist Nx an, den Workspace mit React-spezifischen Konfigurationen zu initialisieren.

3. Eine Bibliothek generieren:

nx generate @nrwl/node:library my-library

Dies generiert eine neue Node.js-Bibliothek namens `my-library`. Nx konfiguriert die Bibliothek und ihre Abhängigkeiten automatisch.

4. Die Anwendung bauen:

nx build my-app

Dies baut die React-Anwendung. Nx analysiert den Abhängigkeitsgraphen und baut nur die notwendigen Dateien neu auf.

5. Tests ausführen:

nx test my-app

Dies führt die Komponententests für die React-Anwendung aus. Nx speichert die Testergebnisse im Cache, um nachfolgende Testläufe zu beschleunigen.

6. Den Abhängigkeitsgraphen anzeigen:

nx graph

Dies öffnet eine Weboberfläche, die den Abhängigkeitsgraphen des Monorepos visualisiert.

Nx-Konfiguration

Nx wird über die Datei `nx.json` konfiguriert, die sich im Stammverzeichnis des Workspaces befindet. Diese Datei definiert die Projekte im Workspace, deren Abhängigkeiten und die Aufgaben, die für sie ausgeführt werden können.

Wichtige Konfigurationsoptionen in `nx.json` umfassen:

• `projects`: Definiert die Projekte im Workspace und deren Konfiguration, wie z.B. deren Stammverzeichnis und Build-Ziele.
• `tasksRunnerOptions`: Konfiguriert den Task-Runner, der für die Ausführung von Aufgaben und das Zwischenspeichern ihrer Ergebnisse verantwortlich ist.
• `affected`: Konfiguriert, wie Nx bestimmt, welche Projekte von einer Änderung betroffen sind.

Beispiel `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Welches Tool wählen?

Sowohl Lerna als auch Nx sind ausgezeichnete Tools zur Verwaltung von Frontend-Monorepos, sie decken jedoch leicht unterschiedliche Anforderungen ab. Hier ist ein Vergleich, der Ihnen bei der Auswahl des richtigen Tools für Ihr Projekt helfen soll:

Merkmal	Lerna	Nx
Fokus	Paketverwaltung	Build-System und Aufgabenorchestrierung
Inkrementelle Builds	Begrenzt (erfordert externe Tools)	Integriert und stark optimiert
Berechnungscaching	Nein	Ja
Codegenerierung	Nein	Ja
Plugin-Ökosystem	Begrenzt	Umfassend
Lernkurve	Niedriger	Höher
Komplexität	Einfacher	Komplexer
Anwendungsfälle	Projekte, die sich hauptsächlich auf die Verwaltung und Veröffentlichung von npm-Paketen konzentrieren.	Große und komplexe Projekte, die optimierte Build-Zeiten, Codegenerierung und ein umfassendes Build-System erfordern.

Wählen Sie Lerna, wenn:

• Sie primär npm-Pakete verwalten und veröffentlichen müssen.
• Ihr Projekt relativ klein bis mittelgroß ist.
• Sie ein einfacheres Tool mit einer geringeren Lernkurve bevorzugen.
• Sie bereits mit npm und Yarn vertraut sind.

Wählen Sie Nx, wenn:

• Sie optimierte Build-Zeiten und inkrementelle Builds benötigen.
• Sie Codegenerierungsfunktionen wünschen.
• Sie ein umfassendes Build-System mit Aufgabenorchestrierung benötigen.
• Ihr Projekt groß und komplex ist.
• Sie bereit sind, Zeit in das Erlernen eines leistungsfähigeren Tools zu investieren.

Können Sie Lerna mit Nx verwenden?

Ja, Lerna und Nx können zusammen verwendet werden. Diese Kombination ermöglicht es Ihnen, die Paketverwaltungsfunktionen von Lerna zu nutzen und gleichzeitig von Nx' optimiertem Build-System und der Aufgabenorchestrierung zu profitieren. Nx kann als Task-Runner für Lerna konfiguriert werden, was inkrementelle Builds und Berechnungscaching für von Lerna verwaltete Pakete bereitstellt.

Best Practices für das Frontend-Monorepo-Management

Unabhängig davon, ob Sie Lerna oder Nx wählen, ist die Einhaltung bewährter Praktiken entscheidend für die erfolgreiche Verwaltung eines Frontend-Monorepos:

• Klare Projektstruktur etablieren: Organisieren Sie Ihre Projekte logisch und konsistent. Verwenden Sie eine klare Namenskonvention für Pakete und Bibliotheken.
• Konsistente Codierungsstandards durchsetzen: Verwenden Sie Linter und Formatierer, um einen konsistenten Code-Stil über alle Projekte hinweg sicherzustellen. Tools wie ESLint und Prettier können in Ihren Workflow integriert werden.
• Build- und Testprozesse automatisieren: Verwenden Sie CI/CD-Pipelines, um Build-, Test- und Bereitstellungsprozesse zu automatisieren. Tools wie Jenkins, CircleCI und GitHub Actions können verwendet werden.
• Code-Reviews implementieren: Führen Sie gründliche Code-Reviews durch, um die Codequalität und Wartbarkeit sicherzustellen. Verwenden Sie Pull-Requests und Code-Review-Tools.
• Build-Zeiten und Performance überwachen: Verfolgen Sie Build-Zeiten und Performance-Metriken, um Engpässe und Verbesserungsmöglichkeiten zu identifizieren. Nx bietet Tools zur Analyse der Build-Performance.
• Monorepo-Struktur und -Prozesse dokumentieren: Erstellen Sie eine klare Dokumentation, die die Struktur Ihres Monorepos, die verwendeten Tools und Technologien sowie die Entwicklungs-Workflows erklärt.
• Konventionelle Commits einführen: Verwenden Sie konventionelle Commits, um Versionierungs- und Freigabeprozesse zu automatisieren. Lerna unterstützt konventionelle Commits von Haus aus.

Fazit

Frontend-Monorepos bieten erhebliche Vorteile für die Verwaltung großer und komplexer Projekte, einschließlich Code-Sharing, vereinfachter Abhängigkeitsverwaltung und verbesserter Zusammenarbeit. Lerna und Nx sind leistungsstarke Tools, die Ihnen helfen können, ein Frontend-Monorepo effektiv zu verwalten. Lerna ist eine ausgezeichnete Wahl für die Verwaltung von npm-Paketen, während Nx ein umfassenderes Build-System mit erweiterten Funktionen wie inkrementellen Builds und Codegenerierung bietet. Indem Sie die Anforderungen Ihres Projekts sorgfältig berücksichtigen und Best Practices befolgen, können Sie ein Frontend-Monorepo erfolgreich einführen und seine Vorteile nutzen.

Denken Sie daran, Faktoren wie die Erfahrung Ihres Teams, die Projektkomplexität und die Leistungsanforderungen bei der Wahl zwischen Lerna und Nx zu berücksichtigen. Experimentieren Sie mit beiden Tools und finden Sie dasjenige, das am besten zu Ihren spezifischen Anforderungen passt.

Viel Erfolg auf Ihrer Monorepo-Reise!